import React from 'react'
import { Drawer, Popconfirm, Button, Form, Input, Radio, TreeSelect, Select, message } from 'antd'
import { getRoleApi, addUserApi, editUserApi } from '../../../apis/system'
export default function EditUser(props) {
    const formRef = React.useRef(null)
    const { visible, curUserInfo } = props
    const [options, setOptions] = React.useState([])
    React.useEffect(() => {
        getRoleApi().then(res => {
            // console.log(res);
            setOptions(res.rows.map(item => {
                return { value: item.roleId + '', label: item.roleName }
            }));
            // console.log(options);
        })
    }, [])
    function onClose(flag) {
        props.closeDrawer(flag)
    }

    function onFinish(values) {
        // console.log({ ...values, roleId: values.roleId.join(',') });
        // console.log(values);
        if (!curUserInfo) {
            addUserApi({ ...values, roleId: values.roleId.join(',') }).then(() => {
                message.success('添加成功')
                onClose('update')
            })
        } else {
            editUserApi({ ...values, roleId: values.roleId.join(','),userId:curUserInfo.userId }).then(() => {
                message.success('修改成功')
                onClose('update')
            })
        }

    }
    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };
    // console.log(props);
    React.useEffect(() => {
        if (visible) {
            // console.log(1);
            if (curUserInfo) {
                // console.log(2);
                console.log(curUserInfo);
                formRef.current?.setFieldsValue({
                    ...props.curUserInfo,
                    roleId: curUserInfo?.roleId?.split(',')
                })
            } else {
                // console.log(3);
                formRef.current?.setFieldValue('password', '1234qwer')
            }
        } else {
            formRef.current?.resetFields()
        }
    }, [visible])
    return (
        <div>
            <Drawer
                title={!props.curUserInfo ? '新增用户' : '修改用户'}
                placement="right"
                onClose={onClose}
                open={props.visible}
                closable={false}
                size={'large'}
                headerStyle={{ fontWeight: '100' }}
                footer={
                    <div>
                        <Popconfirm
                            title="确定是否关闭"
                            onConfirm={onClose}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button style={{ marginRight: '20px' }}>取消</Button>
                        </Popconfirm>

                        <Button type='primary' onClick={() => formRef.current.submit()}>确定</Button>
                    </div>
                }
                footerStyle={{ textAlign: 'right' }}
            >
                <Form
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 14,
                    }}
                    layout="horizontal"
                    onFinish={onFinish}
                    ref={formRef}
                >
                    <Form.Item
                        label="用户名"
                        name='username'
                        rules={[
                            {
                                required: true
                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    {
                        curUserInfo ? <></> : <Form.Item label="密码" name='password'>
                            <Input type='password' disabled />
                        </Form.Item>

                    }

                    <Form.Item
                        label="邮箱"
                        name='email'
                        rules={[
                            {
                                type: 'email',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="手机"
                        name='mobile'
                        rules={[
                            {
                                pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
                                message: '请输入正确的手机号'
                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="角色"
                        name='roleId'
                        rules={[
                            {
                                required: true
                            }
                        ]}
                    >
                        <Select
                            mode="multiple"
                            allowClear
                            style={{
                                width: '100%',
                            }}
                            onChange={handleChange}
                            options={options}
                        />
                    </Form.Item>
                    <Form.Item label="部门" name='deptId'>
                        <TreeSelect
                            treeData={[
                                {
                                    title: '开发部',
                                    value: 1,
                                    children: [
                                        {
                                            title: '开发一部',
                                            value: 2,
                                        },
                                        {
                                            title: '开发二部',
                                            value: 3,
                                        },
                                    ],
                                },
                                {
                                    title: '市场部',
                                    value: 4,
                                },
                                {
                                    title: '人事部',
                                    value: 5
                                },
                                {
                                    title: '测试部',
                                    value: 6
                                }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label='状态'
                        name='status'
                        rules={[
                            {
                                required: true,
                                message: '状态必选'
                            }
                        ]}
                    >
                        <Radio.Group>
                            <Radio value="0"> 锁定 </Radio>
                            <Radio value="1"> 有效 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label='性别'
                        name='ssex'
                        rules={[
                            {
                                required: true,
                                message: '性别必选'
                            }
                        ]}
                    >
                        <Radio.Group>
                            <Radio value="0"> 男 </Radio>
                            <Radio value="1"> 女 </Radio>
                            <Radio value="2"> 保密 </Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>

            </Drawer>
        </div>
    )
}
